<template>
    <div>
        <h1>添加</h1>
        商品名:<input type="text" v-model="form.name">
        价格:<input type="text" v-model="form.price">
        <button @click="add">添加</button>

        <h1>展示</h1>
        <table border="1">
            <tr>
                <td>id</td>
                <td>商品名称</td>
                <td>商品价格</td>
            </tr>
            <tr v-for="i in show">
                <td>{{i.id}}</td>
                <td>{{i.name}}</td>
                <td>{{i.price}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        name:'order_add_show',
        data(){
            return{
                form:{},
                show:[]
            }
        },
        methods:{
            add(){
                this.$axios.post('/show',this.form)
                .then(res=>{
                    console.log(res.data)
                    alert("添加成功")
                    this.form={}
                })
            },
            show_show(){
                this.$axios.get('/show')
                .then(res=>{
                    console.log(res.data.matter)
                    this.show = res.data.matter
                })
            }
        },
        mounted(){
            this.show_show()
        }
    }
</script>

<style scoped>

</style>